<template>
  <div>
    <div>
      <table>
        <tr>
          <td>类似表单：</td>
          <td :style="{ width: '200px' }">
            <el-select v-model="similarFormCustom" @change="similarFormCustomChange">
              <el-option
                v-for="item in similarFormCustomOptions"
                :key="item.formCustomId"
                :label="item.formCustomName"
                :value="item.formCustomId"
              />
            </el-select>
          </td>
          <td>自定义类型：</td>
          <td>{{ customerTypeName }}</td>
          <td><el-checkbox v-model="isShowBorder" size="large">显示边框</el-checkbox></td>
          <td><el-checkbox v-model="isDefault" size="large">设置为默认表单</el-checkbox></td>
          <td>
            <p>显示模式：</p>
          </td>
          <td :style="{ width: '200px' }">
            <el-select v-model="hearderData.layoutType">
              <el-option label="一列" value="oneRow" />
              <el-option label="二列" value="twoRow" />
            </el-select>
          </td>
          <td>
            <el-button type="primary" link @click="previewCustomer">预览</el-button>
          </td>
          <td>
            <el-button type="primary" link @click="saveCustomer">保存</el-button>
          </td>
        </tr>
      </table>

      <el-dialog title="预览" v-model="previewCustomerTableVisible">
        <div :style="{ height: '500px' }" class="custom-tree">
          <form-create v-model="formData" :option="option" :rule="formCreateRules" />
          <el-form style="width: 100%" label-width="122px">
            <el-form-item label="描述 :">
              <WangEditor v-if="edescFlag == true" v-model:value="content" width="100px" height="100px" />
            </el-form-item>
          </el-form>
          <form-create v-model="formData" :option="option2" :rule="formCreateRules2" class="custom-tree" />
        </div>
      </el-dialog>
    </div>
    <div class="card content-box">
      <el-row>
        <el-col :span="18" :style="{ width: '1000px' }" v-if="hearderData.layoutType == 'oneRow'">
          <draggable
            :list="defaultFormCreateRules"
            ghost-class="ghost"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onDragStart"
            @end="onDragEnd"
            :sort="true"
            handle=".drag"
            item-key="id"
            group="group1"
          >
            <template #item="{ element, index }">
              <div :class="element.state == 1 ? 'item1 item' : 'item1 item'">
                <div class="drag">
                  <i>{{ element.title }}:</i>
                  <i><el-input :style="{ width: '200px' }" /></i>
                  <i><el-button :icon="Delete" link @click="deleteObj(element, index)"></el-button></i>
                </div>
              </div>
            </template>
          </draggable>
        </el-col>
        <el-col :span="18" :style="{ width: '1000px' }" v-if="hearderData.layoutType == 'twoRow'">
          <draggable
            :list="defaultFormCreateRules"
            ghost-class="ghost"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onDragStart"
            @end="onDragEnd"
            :sort="true"
            handle=".drag"
            item-key="id"
            group="group1"
          >
            <template #item="{ element, index }">
              <div :class="element.state == 1 ? 'item1 item' : 'item'">
                <div class="drag">
                  <i>{{ element.title }}:</i>
                  <i><el-input :style="{ width: '200px' }" /></i>
                  <i><el-button :icon="Delete" link @click="deleteObj(element, index)"></el-button></i>

                  <!-- <el-row :style="{'width':'400px'}" >
										<el-col :span="10">
											<lable :style="{'width':'100px'}">{{element.title}}:</lable>
										</el-col>
										<el-col :span="6">
											<el-input  :style="{'width':'200px'}"  />
										</el-col>
										<el-col :span="4">
											<lable :style="{'width':'100px'}">asdfdsa{{ index + 1 }}</lable>
										</el-col>
										
									</el-row> -->
                </div>
              </div>
            </template>
          </draggable>
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础字段" name="1">
              <draggable
                :list="baseFormCreateRules"
                ghost-class="ghost"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onDragStart"
                @end="onDragEnd"
                :sort="true"
                handle=".drag"
                item-key="id"
                group="group1"
              >
                <template #item="{ element }">
                  <div>
                    <!-- <i><el-checkbox
						                 @change="checkoutChange(element, index)"
						                 v-model="element.state"
						                 size="large"
						                 :label="element.name"
						                 :true-label="1"
						                 :false-label="0"
						               />
						             </i>
						             <i>{{ index + 1 }}</i>
						             <i class="drag">拖动</i> -->
                    <div class="drag">
                      <el-row :style="{ width: '100%' }">
                        <el-col :span="12">
                          <label>{{ element.title }}:</label>
                        </el-col>
                        <el-col :span="6">
                          <el-input :style="{ width: '100px' }" />
                        </el-col>
                        <!-- <el-col :span="6">
									 			<i>{{ index + 1 }}</i>
									 		</el-col> -->
                      </el-row>
                    </div>
                  </div>
                </template>
              </draggable>
            </el-collapse-item>
            <el-collapse-item title="自定义字段" name="2">
              <draggable
                :list="customerFormCreateRules"
                ghost-class="ghost"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onDragStart"
                @end="onDragEnd"
                :sort="true"
                handle=".drag"
                item-key="id"
                group="group1"
              >
                <template #item="{ element }">
                  <div>
                    <!-- <i><el-checkbox
						                  @change="checkoutChange(element, index)"
						                  v-model="element.state"
						                  size="large"
						                  :label="element.name"
						                  :true-label="1"
						                  :false-label="0"
						                />
						              </i>
						              <i>{{ index + 1 }}</i>
						              <i class="drag">拖动</i> -->
                    <div class="drag">
                      <el-row :style="{ width: '100%' }">
                        <el-col :span="12">
                          <label>{{ element.title }}:</label>
                        </el-col>
                        <el-col :span="6">
                          <el-input :style="{ width: '100px' }" />
                        </el-col>
                        <!-- <el-col :span="6">
									  			<i>{{ index + 1 }}</i>
									  		</el-col> -->
                      </el-row>
                    </div>
                  </div>
                </template>
              </draggable>
            </el-collapse-item>
          </el-collapse>
          <!-- <draggable
			   				  :list="state.modules.public"
			   				  ghost-class="ghost"
			   				  handle=".move"
			   				  filter=".forbid"
			   				  :force-fallback="true"
			   				  chosen-class="chosenClass"
			   				  animation="300"
			   				  @start="onStart"
			   				  @end="onEnd"
			   				  group="group1"
			   				  :fallback-class="true"
			   				  :fallback-on-body="true"
			   				  :touch-start-threshold="50"
			   				  :fallback-tolerance="50"
			   				  :move="onMove"
			   				>
			   				 <template #item="{ element }" >
			   				   <div :class="element.disabledMove ? 'forbid itemold' : 'itemold'"  >
			   				 	 <label class="move">{{ element.viewName!=undefined?element.viewName:element.reportName!=undefined?element.reportName:element.filterName }}</label>
			   				 	 <p >{{ element.viewType=="staticView"?"静态视图":element.viewType=="singleView"?"报表视图":element.viewType=="filterView"?"过滤视图":element.filterName!=""?"过滤视图":element.reportName!=""?"报表视图":"" }}</p>
			   				   </div>
			   				 </template>
			   				</draggable> -->
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <!-- <draggable
							  :list="state.modules.public2"
							  ghost-class="ghost"
							  handle=".move"
							  filter=".forbid"
							  :force-fallback="true"
							  chosen-class="chosenClass"
							  animation="300"
							  @start="onStart"
							  @end="onEnd"
							  group="group1"
							  :fallback-class="true"
							  :fallback-on-body="true"
							  :touch-start-threshold="50"
							  :fallback-tolerance="50"
							  :move="onMove"
							>
							 <template #item="{ element }" >
							   <div :class="element.disabledMove ? 'forbid itemold' : 'itemold'"  >
							 	 <label class="move">{{ element.viewName!=undefined?element.viewName:element.reportName!=undefined?element.reportName:element.filterName }}</label>
							 	 <p >{{ element.viewType=="staticView"?"静态视图":element.viewType=="singleView"?"报表视图":element.viewType=="filterView"?"过滤视图":element.filterName!=""?"过滤视图":element.reportName!=""?"报表视图":"" }}</p>
							   </div>
							 </template>
							</draggable> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
//导入draggable组件
import draggable from "vuedraggable";
import {
  findallViewAndUserViewTwo,
  findAllSystemView,
  findCustomFilter,
  updateRowsWidth,
  updateUserCustomView,
  findBaseReport,
  sgreportFindPager,
  mutilreportFindPager,
  kpireportFindPager,
  crossreportFindPager
} from "@/api/modules/systemTools";
import { getCurrentLoginUser } from "@/api/modules/accessController";
import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import { Base64 } from "js-base64";
import {
  findPageScheduledTask,
  saveScheduledTask,
  deleteScheduledTask,
  findScheduledTaskById,
  editScheduledTask,
  findPagerContentTemplate,
  editTemplateName,
  deleteContentTemplate,
  findPagerFormCustom,
  deleteFormCustom,
  findEavEntity,
  isFormCustomNameExisted,
  findFormCustomById,
  findAttributesByEavNo,
  saveFormCustom,
  findSimilarFormCustom
} from "@/api/modules/systemTools";
import { dataDictionaryItemsfindByCode, getCategoryTreeAllData } from "@/api/modules/dataDictionary";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Avatar } from "@element-plus/icons-vue";
import WangEditor from "@/components/WangEditor/index.vue";
import formCreate from "@form-create/element-ui"; // 引入 FormCreate
const formData = ref({});
const router = useRouter();
const route = useRoute();
const tabStore = useTabsStore();
onMounted(() => {
  //loadData();
  //编辑时加载数据
  let query = JSON.parse(JSON.stringify(route.query));
  let newParams = JSON.parse(query.data);
  formCustomData.eavNo = newParams.eav;
  formCustomData.formCustomName = newParams.name;
  customerTypeName.value = newParams.eavName;

  findAttributesByEavNo(newParams.eav).then(res => {
    (res as any).forEach(function (element) {
      console.log("sssssssssssssssssss");
      console.log(element);
      if (element.attrType == "String") {
        customerFormCreateRules.value.push({
          type: "input",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          }
        });
      }
      if (element.attrType == "Radio") {
        customerFormCreateRules.value.push({
          type: "radio",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          options: [{ value: true, label: element.attrAsName, disabled: false }]
        });
      }
      if (element.attrType == "checkbox") {
        customerFormCreateRules.value.push({
          type: "checkbox",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          options: [{ value: true, label: element.attrAsName, disabled: false }]
        });
      }
      if (element.attrType == "Double") {
        customerFormCreateRules.value.push({
          type: "InputNumber",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            precision: 3
          }
        });
      }
      if (element.attrType == "Integer") {
        customerFormCreateRules.value.push({
          type: "InputNumber",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            precision: 0
          }
        });
      }
      if (element.attrType == "Date") {
        customerFormCreateRules.value.push({
          type: "DatePicker",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            type: "datetime",
            // format: "YYYY-MM-dd HH:mm:ss",
            placeholder: "请选择日期"
          }
        });
      }
      if (element.attrType == "Lob") {
        customerFormCreateRules.value.push({
          type: "input",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          customerType: "customer",
          col: {
            span: 10
          },
          props: {
            type: "textarea "
          }
        });
      }
      if (element.attrType == "DataDictionaray") {
        let optionList = [];
        //优先级priority
        dataDictionaryItemsfindByCode(element.attrdataDictionary).then(res => {
          (res as any).forEach(function (element) {
            element["lable"] = element["dname"];
            element["value"] = element["dname"];
          });
          optionList = res as any;
          // 	  customerFormCreateRules.value.push(
          // 	  	{
          // 	  	  type: "select",
          // 	  	  field: element.attrName,
          // 	  	  title: element.attrAsName,
          // 	  	  value: "",
          // 	  	    options: optionList,
          // 	attrdataDictionary:element.attrdataDictionary,
          // 	customerType:"customer",
          // 	  	}

          // 	  )
          // let dataDictionaryFlagListObj={
          // 	id:element.attrName,
          // 	attrdataDictionary:element.attrdataDictionary,
          // 	dataList:optionList
          // }
          // dataDictionaryFlagList.value.push(dataDictionaryFlagListObj)
        });
        customerFormCreateRules.value.push({
          type: "select",
          field: element.attrName,
          title: element.attrAsName,
          value: "",
          options: optionList,
          attrdataDictionary: element.attrdataDictionary,
          customerType: "customer"
        });
      }
    });
    console.log("ssssssssssssssssssss222222222222");

    resAllDataCustomerFormCreateRules.value = customerFormCreateRules.value;
    console.log(resAllDataCustomerFormCreateRules.value);
  });
  let similarForm = {
    eavNo: newParams.eav,
    type: "request"
  };
  findSimilarFormCustom(similarForm, "formCustomQueryDTO").then(res => {
    console.log(res);
    similarFormCustomOptions.value = res as any;
  });
  console.log(newParams);
  // let newParams = JSON.parse(JSON.stringify(params));
  if (newParams.id != undefined && newParams.id != null) {
    formCustomData.formCustomId = newParams.id;
    findFormCustomById(newParams.id).then(res => {
      //let tmpDefaultFormCreateRules=[];
      console.log("已存在：过滤");
      //console.log(item)
      defaultFormCreateRules.value = [];
      let newRes2 = JSON.parse(JSON.stringify(res));
      let yyde = Base64.decode(newRes2.formCustomContents); //解密
      let a = JSON.parse(yyde);
      // let a=b._value
      console.log(a);
      for (let i = 0; i < a.length; i++) {
        if (a[i].label != undefined && a[i].label != "") {
          defaultFormCreateRules.value = defaultBaseFormCreateRules.value;
          break;
        }
        if (a[i].col != null && a[i].col != undefined) {
          hearderData.value.layoutType = "twoRow";
        } else {
          hearderData.value.layoutType = "oneRow";
        }
        console.log(a[i].col != null && a[i].col != undefined);
        console.log(hearderData.value.layoutType);
        if (a[i].title == "所属客户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCompanyNoTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求分类") {
          a[i]["on"] = {
            focus(inject) {
              dialogRequestCategoryTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求用户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCreatedByTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "位置") {
          a[i]["on"] = {
            focus(inject) {
              dialogLocationTableVisible.value = true;
            }
          };
        }
        if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
          let optionList = [];
          //优先级priority
          // dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
          //   (res as any).forEach(function (element) {
          //     // element["label"] = element["dname"];
          //     // element["value"] = element["dname"];
          // 	//optionList.push({label:element["dname"],value:element["dcode"]})
          // 	a[i].options.push({label:element["dname"],value:element["dcode"]})
          //   });
          // });
        }
        //tmpDefaultFormCreateRules.push(a[i])
        defaultFormCreateRules.value.push(a[i]);
      }

      console.log("ssssssssssssssssssssssssssssss");
      console.log(defaultFormCreateRules.value);
      console.log(defaultBaseFormCreateRules.value);
      console.log(resAllDataCustomerFormCreateRules.value);
      //defaultFormCreateRules.value=tmpDefaultFormCreateRules
      customerFormCreateRules.value = [];
      baseFormCreateRules.value = [];
      defaultBaseFormCreateRules.value.forEach(item => {
        let newItem = JSON.parse(JSON.stringify(item));
        let isAddBase = true;
        defaultFormCreateRules.value.forEach(tmp => {
          let newTmp = JSON.parse(JSON.stringify(tmp));
          if (newItem.field == newTmp.field) {
            isAddBase = false;
          }
        });
        if (isAddBase == true) {
          baseFormCreateRules.value.push(item);
        }
      });

      findAttributesByEavNo(newParams.eav).then(res => {
        (res as any).forEach(function (element) {
          console.log("sssssssssssssssssss");
          console.log(element);
          if (element.attrType == "String") {
            customerFormCreateRules.value.push({
              type: "input",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              }
            });
          }
          if (element.attrType == "Radio") {
            customerFormCreateRules.value.push({
              type: "radio",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              options: [{ value: true, label: element.attrAsName, disabled: false }]
            });
          }
          if (element.attrType == "checkbox") {
            customerFormCreateRules.value.push({
              type: "checkbox",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              options: [{ value: true, label: element.attrAsName, disabled: false }]
            });
          }
          if (element.attrType == "Double") {
            customerFormCreateRules.value.push({
              type: "InputNumber",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                precision: 3
              }
            });
          }
          if (element.attrType == "Integer") {
            customerFormCreateRules.value.push({
              type: "InputNumber",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                precision: 0
              }
            });
          }
          if (element.attrType == "Date") {
            customerFormCreateRules.value.push({
              type: "DatePicker",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                type: "datetime",
                // format: "YYYY-MM-dd HH:mm:ss",
                placeholder: "请选择日期"
              }
            });
          }
          if (element.attrType == "Lob") {
            customerFormCreateRules.value.push({
              type: "input",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              customerType: "customer",
              col: {
                span: 10
              },
              props: {
                type: "textarea "
              }
            });
          }
          if (element.attrType == "DataDictionaray") {
            let optionList = [];
            //优先级priority
            dataDictionaryItemsfindByCode(element.attrdataDictionary).then(res => {
              (res as any).forEach(function (element) {
                element["lable"] = element["dname"];
                element["value"] = element["dname"];
              });
              optionList = res as any;
            });
            customerFormCreateRules.value.push({
              type: "select",
              field: element.attrName,
              title: element.attrAsName,
              value: "",
              options: optionList,
              attrdataDictionary: element.attrdataDictionary,
              customerType: "customer"
            });
          }
        });
        resAllDataCustomerFormCreateRules.value = customerFormCreateRules.value;
        customerFormCreateRules.value = [];
        resAllDataCustomerFormCreateRules.value.forEach(item => {
          let newItem = JSON.parse(JSON.stringify(item));
          let isAddCustomer = true;
          defaultFormCreateRules.value.forEach(tmp => {
            let newTmp = JSON.parse(JSON.stringify(tmp));
            console.log("newItem.field==newTmp.field");
            console.log(newItem.field == newTmp.field);
            console.log(resAllDataCustomerFormCreateRules.value);
            console.log(defaultFormCreateRules.value);

            if (newItem.field == newTmp.field) {
              isAddCustomer = false;
            }
          });
          if (isAddCustomer == true) {
            customerFormCreateRules.value.push(item);
          }
        });
      });

      // console.log(res.formCustomContents)
      // console.log(Base64.decode(res.formCustomContents))
      // let resArr:any[]=[]
      // let newRes = JSON.parse(JSON.stringify(res));
      // let tmp:any[]=JSON.parse(Base64.decode(newRes.formCustomContents))
      // if(tmp.length!=0){
      // 	 for(let i=0;i<tmp.length;i++){
      // 		 if(tmp[i].attrType=="String"){
      // 			 if(tmp[i].label=="所属客户"){
      // 				 resArr.push(
      // 				 	{
      // 				 	  type: "input",
      // 				 	  field: tmp[i].attrName,
      // 				 	  title: tmp[i].attrAsName,
      // 				 	  value: "",
      // 				 	  col:{
      // 				 	                              span:10
      // 				 	                          },
      // 						"on": {
      // 							focus(inject){
      // 								dialogCompanyNoTableVisible.value = true
      // 							}
      // 						}
      // 				 	}
      // 				 )
      // 			 }else if(tmp[i].label=="描述"){

      // 			 }
      // 			 else{
      // 				 resArr.push(
      // 				 	{
      // 				 	  type: "input",
      // 				 	  field: tmp[i].attrName,
      // 				 	  title: tmp[i].attrAsName,
      // 				 	  value: "",
      // 				 	  col:{
      // 				 	                              span:10
      // 				 	                          }
      // 				 		// "on": {
      // 				 		//       change: dialogCompanyNoTableVisible.value = true,
      // 				 		//        blur: console.log(formData),
      // 				 		// 	   focus:dialogCompanyNoTableVisible.value = true
      // 				 		//     }
      // 				 	}
      // 				 )
      // 			 }

      // 		 }
      // 		 if(tmp[i].attrType=="Radio"){
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "radio",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 		 		  col:{
      // 		 		                              span:10
      // 		 		                          },
      // 		 		  options:[
      // 		 		          {value:true,label:tmp[i].attrAsName,disabled:false},
      // 		 		      ]
      // 		 		}
      // 		 	)
      // 		 }
      // 		 if(tmp[i].attrType=="checkbox"){
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "checkbox",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 		 		  options:[
      // 		 		          {value:true,label:tmp[i].attrAsName,disabled:false},
      // 		 		      ]
      // 		 		}
      // 		 	)
      // 		 }
      // 		 if(tmp[i].attrType=="Double"){
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "InputNumber",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 		 		   props: {
      // 		 		          precision:3
      // 		 		      },
      // 		 		}
      // 		 	)
      // 		 }
      // 		 if(tmp[i].attrType=="Integer"){
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "InputNumber",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 		 		   props: {
      // 		 		          precision:0
      // 		 		      },
      // 		 		}
      // 		 	)
      // 		 }
      // 		 if(tmp[i].attrType=="Date"){
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "DatePicker",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 		 		   props: {
      // 		 		          type: "datetime",
      // 		 		          format: "YYYY-MM-dd HH:mm:ss",
      // 		 		          placeholder:"请选择日期",

      // 		 		      }
      // 		 		}
      // 		 	)
      // 		 }

      // 		 if(tmp[i].attrType=="Lob"){
      // 			 console.log("ddd")
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "input",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 				   state: "1",
      // 		 		   props: {
      // 		 		          type: "textarea ",
      // 		 		      }
      // 		 		}
      // 		 	)
      // 		 }
      // 		 if(tmp[i].attrType=="DataDictionaray"){
      // 			 let optionList=[]
      // 		 	resArr.push(
      // 		 		{
      // 		 		  type: "select",
      // 		 		  field: tmp[i].attrName,
      // 		 		  title: tmp[i].attrAsName,
      // 		 		  value: "",
      // 				  col:{
      // 				                              span:10
      // 				                          },
      // 		 		    options: optionList,
      // 		 		}
      // 		 	)

      // 		 }

      // 	 }
      // }
      // console.log(resArr)
      // //myArray.value=JSON.parse(Base64.decode(res.formCustomContents))
      // myArray.value=resArr
    });
  } else {
    defaultFormCreateRules.value = defaultBaseFormCreateRules.value;
  }
});
const activeNames = ref("");
const dialogCompanyNoTableVisible = ref(false);
const dialogCreatedByTableVisible = ref(false); //创建人
const dialogLocationTableVisible = ref(false);
const dialogRequestCategoryTableVisible = ref(false);
const previewCustomerTableVisible = ref(false);
const isShowBorder = ref(false);
const isDefault = ref(false);
const customerTypeName = ref("");

const similarFormCustomOptions = ref<any>([]);
const baseFormCreateRules = ref<any>([]);
const defaultBaseFormCreateRules = ref<any>([
  {
    type: "input",
    field: "companyName",
    title: "所属客户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        (dialogCompanyNoTableVisible.value = true), console.log("dsfdsf");
      }
    },
    validate: [{ required: true, message: "请选择客户", trigger: "change" }]
  },
  {
    type: "input",
    field: "createdByName",
    title: "请求用户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogCreatedByTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择用户", trigger: "change" }]
  },
  {
    type: "input",
    field: "requestCategoryName",
    title: "请求分类",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogRequestCategoryTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择分类", trigger: "change" }]
  },
  {
    type: "input",
    field: "etitle",
    title: "标题",
    value: "",
    name: "etitle",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写标题", trigger: "change" }]
  },
  {
    type: "input",
    field: "edesc",
    title: "描述",
    state: "1",
    value: "",
    name: "edesc",
    col: {
      span: 10
    }
  },
  {
    type: "select",
    field: "imodeNo",
    title: "来源",
    value: "",
    attrdataDictionary: "imode",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "priorityNo",
    title: "优先级",
    value: "",
    attrdataDictionary: "priority",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "effectRangeNo",
    title: "影响",
    value: "",
    attrdataDictionary: "effectRange",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "levelNo",
    title: "复杂程度",
    value: "",
    attrdataDictionary: "level",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "seriousnessNo",
    title: "紧急度",
    value: "",
    attrdataDictionary: "seriousness",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "input",
    field: "locationName",
    title: "位置",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogLocationTableVisible.value = true;
      }
    }
  }
]);
const customerFormCreateRules = ref<any>([]);
const resAllDataCustomerFormCreateRules = ref<any>([]);
const defaultFormCreateRules = ref<any>([
  {
    type: "input",
    field: "companyName",
    title: "所属客户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        (dialogCompanyNoTableVisible.value = true), console.log("dsfdsf");
      }
    },
    validate: [{ required: true, message: "请选择客户", trigger: "change" }]
  },
  {
    type: "input",
    field: "createdByName",
    title: "请求用户",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogCreatedByTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择用户", trigger: "change" }]
  },
  {
    type: "input",
    field: "requestCategoryName",
    title: "请求分类",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogRequestCategoryTableVisible.value = true;
      }
    },
    validate: [{ required: true, message: "请选择分类", trigger: "change" }]
  },
  {
    type: "input",
    field: "etitle",
    title: "标题",
    value: "",
    name: "etitle",
    col: {
      span: 10
    },
    validate: [{ required: true, message: "请填写标题", trigger: "change" }]
  },
  {
    type: "input",
    field: "edesc",
    title: "描述",
    state: "1",
    value: "",
    name: "edesc",
    col: {
      span: 10
    }
  },
  {
    type: "select",
    field: "imodeNo",
    title: "来源",
    value: "",
    attrdataDictionary: "imode",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "priorityNo",
    title: "优先级",
    value: "",
    attrdataDictionary: "priority",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "effectRangeNo",
    title: "影响",
    value: "",
    attrdataDictionary: "effectRange",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "levelNo",
    title: "复杂程度",
    value: "",
    attrdataDictionary: "level",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "select",
    field: "seriousnessNo",
    title: "紧急度",
    value: "",
    attrdataDictionary: "seriousness",
    col: {
      span: 10
    },
    options: []
  },
  {
    type: "input",
    field: "locationName",
    title: "位置",
    value: "",
    col: {
      span: 10
    },
    on: {
      focus(inject) {
        dialogLocationTableVisible.value = true;
      }
    }
  }
]);

// 关闭
const confirm = () => {
  //emit("update:dragDialog", false);
};
// 提交
const submitDrag = () => {
  // let encodePwd=Base64.encode("张三吗");//加密
  // console.log(encodePwd)
  // let decodePwd=Base64.decode(encodePwd);//解密
  // console.log(decodePwd)
  //emit("submitDrag");
};
// 复选框勾选
const checkoutChange = (element, index) => {
  //emit("checkoutChange", element, index);
};
// 拖动前
const onDragStart = () => {
  // emit("onDragStart");
};
// 拖动后
const onDragEnd = () => {
  //emit("onDragEnd");
};
const formCustomData = reactive({
  formCustomId: "",
  formCustomName: "",
  eavNo: "",
  ciCategoryNo: "",
  formCustomContents: "",
  isShowBorder: 0,
  type: "request",
  isDefault: "false"
});
const saveCustomer = () => {
  if (hearderData.value.layoutType == "oneRow") {
    defaultFormCreateRules.value.forEach(element => {
      console.log(element);
      delete element.col;
      delete element.yy;
    });
  } else {
    defaultFormCreateRules.value.forEach(element => {
      element["col"] = {
        span: 10
      };
      console.log(element);
    });
  }
  formCustomData.isShowBorder = isShowBorder.value == true ? 1 : 0;
  formCustomData.isDefault = isDefault.value == true ? "true" : "false";
  console.log(defaultFormCreateRules.value);
  formCustomData.formCustomContents = Base64.encode(JSON.stringify(defaultFormCreateRules.value)); //加密
  console.log(formCustomData);
  saveFormCustom(formCustomData, "formCustomDTO", "").then(res => {
    ElMessage.success("新增成功");
    tabStore.removeTabs(route.fullPath);
    router.push(`/system/tools/customerForm?pageNo=${Math.random().toFixed(3)}`);
  });
};
const edescFlag = ref(false);
const formCreateRules = ref<any>([]);
const formCreateRules2 = ref<any>([]);
const option = ref({
  submitBtn: false
});
const option2 = ref({
  submitBtn: false
});
const previewCustomer = () => {
  edescFlag.value = false;
  previewCustomerTableVisible.value = true;
  let a = defaultFormCreateRules.value;
  let formCreateRulesArray: any[] = [];
  let formCreateRules2Array: any[] = [];

  for (let i = 0; i < a.length; i++) {
    if (a[i].title == "所属客户") {
      a[i]["on"] = {
        focus(inject) {
          dialogCompanyNoTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "请求分类") {
      a[i]["on"] = {
        focus(inject) {
          dialogRequestCategoryTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "请求用户") {
      a[i]["on"] = {
        focus(inject) {
          dialogCreatedByTableVisible.value = true;
        }
      };
    }
    if (a[i].title == "位置") {
      a[i]["on"] = {
        focus(inject) {
          dialogLocationTableVisible.value = true;
        }
      };
    }
    if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
      let optionList = [];
      //优先级priority
      dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
        (res as any).forEach(function (element) {
          // element["label"] = element["dname"];
          // element["value"] = element["dname"];
          //optionList.push({label:element["dname"],value:element["dcode"]})
          (a[i].col = {
            span: 10
          }),
            a[i].options.push({ label: element["dname"], value: element["dcode"] });
        });
      });
    }

    if (a[i].title == "描述") {
      edescFlag.value = true;
      continue;
    }
    if (edescFlag.value == false) {
      formCreateRulesArray.push(a[i] as any);
    } else {
      formCreateRules2Array.push(a[i] as any);
    }
  }
  formCreateRules.value = formCreateRulesArray;
  formCreateRules2.value = formCreateRules2Array;

  console.log(formData.value);
  console.log("xxxxxxx");
};
const rules = reactive<FormRules>({
  companyName: [{ required: true, message: "请选择公司", trigger: "blur" }],
  createdByName: [{ required: true, message: "请选择请求用户", trigger: "blur" }],
  requestCategoryName: [{ required: true, message: "请选择请求分类", trigger: "blur" }],
  etitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
  edesc: [{ required: true, message: "请输入描述", trigger: "blur" }]
});
const loadData = () => {
  state.modules.group1 = [];
  state.modules.group2 = [];
  state.modules.group3 = [];
  state.modules.group4 = [];
  state.modules.public = [];
  state.modules.public2 = [];
  hearderData.value.selId = "static_all";
  getCurrentLoginUser().then(res => {
    let newParams = JSON.parse(JSON.stringify(res));
    hearderData.value.loginName = newParams.loginName;
    findallViewAndUserViewTwo(newParams.loginName).then(viewRes => {
      let newViewRes = JSON.parse(JSON.stringify(viewRes));
      let chars = newViewRes.viewRowsStr.split(":");
      for (let i = 0; i < newViewRes.viewdtos.length; i++) {
        if (chars[i] == "1") {
          state.modules.group1.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "2") {
          state.modules.group2.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "3") {
          state.modules.group3.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "4") {
          state.modules.group4.push(newViewRes.viewdtos[i]);
        } else {
        }
      }
      hearderData.value.layoutType = newViewRes.layoutType;
      hearderData.value.oneRows = newViewRes.rowsWidth.oneRows;
      hearderData.value.twoRows = newViewRes.rowsWidth.twoRows;
      hearderData.value.threeRows = newViewRes.rowsWidth.threeRows;
      hearderData.value.fourRows = newViewRes.rowsWidth.fourRows;
      hearderData.value.customType = newViewRes.customType;

      findAllSystemView().then(allRes => {
        let newallRes = JSON.parse(JSON.stringify(allRes));
        for (let i = 0; i < newallRes.length; i++) {
          let add = true;
          state.modules.group1.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              console.log("已存在：过滤");
              console.log(item.viewName);
              add = false;
            }
          });
          state.modules.group2.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group3.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group4.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          if (add == true) {
            if (state.modules.public.length > state.modules.public2.length) {
              state.modules.public2.push(newallRes[i]);
            } else {
              state.modules.public.push(newallRes[i]);
            }
          }
        }
      });
    });
  });
};

const similarFormCustomChange = (data: any) => {
  let tmpDefaultFormCreateRules = [];
  similarFormCustomOptions.value.forEach(item => {
    if (item.formCustomId == data) {
      console.log("已存在：过滤");
      console.log(item);
      defaultFormCreateRules.value = [];
      let yyde = Base64.decode(item.formCustomContents); //解密
      let a = JSON.parse(yyde);
      // let a=b._value
      console.log(a);
      for (let i = 0; i < a.length; i++) {
        if (a[i].title == "所属客户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCompanyNoTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求分类") {
          a[i]["on"] = {
            focus(inject) {
              dialogRequestCategoryTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "请求用户") {
          a[i]["on"] = {
            focus(inject) {
              dialogCreatedByTableVisible.value = true;
            }
          };
        }
        if (a[i].title == "位置") {
          a[i]["on"] = {
            focus(inject) {
              dialogLocationTableVisible.value = true;
            }
          };
        }
        if (a[i].attrdataDictionary != null && a[i].attrdataDictionary != undefined) {
          let optionList = [];
          //优先级priority
          // dataDictionaryItemsfindByCode(a[i].attrdataDictionary).then(res => {
          //   (res as any).forEach(function (element) {
          //     // element["label"] = element["dname"];
          //     // element["value"] = element["dname"];
          // 	//optionList.push({label:element["dname"],value:element["dcode"]})
          // 	a[i].options.push({label:element["dname"],value:element["dcode"]})
          //   });
          // });
        }
        //tmpDefaultFormCreateRules.push(a[i])
        defaultFormCreateRules.value.push(a[i]);
      }
    }
  });
  //defaultFormCreateRules.value=tmpDefaultFormCreateRules
  customerFormCreateRules.value = [];
  baseFormCreateRules.value = [];
  defaultBaseFormCreateRules.value.forEach(item => {
    let newItem = JSON.parse(JSON.stringify(item));
    let isAddBase = true;
    defaultFormCreateRules.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newItem.field == newTmp.field) {
        isAddBase = false;
      }
    });
    if (isAddBase == true) {
      baseFormCreateRules.value.push(item);
    }
  });
  resAllDataCustomerFormCreateRules.value.forEach(item => {
    let newItem = JSON.parse(JSON.stringify(item));
    let isAddCustomer = true;
    defaultFormCreateRules.value.forEach(tmp => {
      let newTmp = JSON.parse(JSON.stringify(tmp));
      if (newItem.field == newTmp.field) {
        isAddCustomer = false;
      }
    });
    if (isAddCustomer == true) {
      customerFormCreateRules.value.push(item);
    }
  });

  // console.log(tmpDefaultFormCreateRules)
  // //过滤赋值
  // tmpDefaultFormCreateRules.forEach(tmp=>{
  // 	console.log(tmp)
  // 	let isAddBase=true
  // 	defaultBaseFormCreateRules.value.forEach(item=>{
  // 		console.log(item)
  // 		if(item.field==tmp.field){
  // 			isAddBase=false
  // 		}
  // 	})
  // 	let isAddCustomer=true
  // 	resAllDataCustomerFormCreateRules.value.forEach(customer=>{
  // 		console.log(customer)
  // 		if(customer.field==tmp.field){
  // 			isAddCustomer=false
  // 		}

  // 	})
  // 	if(isAddBase==true){
  // 		defaultFormCreateRules.value.push(tmp)
  // 	}

  // })

  // baseFormCreateRules.value.forEach(item=>{
  // 	let add=true
  // 	tmpDefaultFormCreateRules.value.forEach(tmp=>{
  // 		if(item.field==tmp.field){
  // 			add=false
  // 		}
  // 	})
  // 	if(add==true){
  // 		defaultFormCreateRules.value.push(item)
  // 	}
  // })
};
const hearderData = ref({
  customType: "",
  loginName: "",
  layoutType: "twoRow",
  oneRows: 0,
  twoRows: 0,
  threeRows: 0,
  fourRows: 0,
  selId: "static_all"
});
const content = ref("");
const similarFormCustom = ref();
const data = ref({});
const state = reactive({
  /*工作台的数据结构
    disabledMove:禁止移动
    disabledPark:禁止停靠
  */
  modules: {
    group1: [
      // { name: "消息", id: 1, disabledMove: false, disabledPark: false },
      // { name: "库存", id: 2, disabledMove: false, disabledPark: false },
      // { name: "销量", id: 3, disabledMove: false, disabledPark: false },
      // { name: "日志", id: 4, disabledMove: false, disabledPark: false },
    ] as any[],
    group2: [
      // { name: "订单", id: 5, disabledMove: false, disabledPark: false },
      // { name: "员工", id: 6, disabledMove: false, disabledPark: false },
      // { name: "报表", id: 7, disabledMove: false, disabledPark: false },
    ] as any[],
    group3: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    group4: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public2: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[]
  }
});

//删除元素
const deleteObj = (element, index) => {
  defaultFormCreateRules.value.splice(index, 1);
  if (element.customerType == "customer") {
    customerFormCreateRules.value.push(element);
  } else {
    baseFormCreateRules.value.push(element);
  }
  // console.log(state.modules.group1)
  // for(let i=0;i<state.modules[groupName].length;i++){
  // 	if(state.modules[groupName][i].viewId==element.viewId){
  // 		state.modules[groupName].splice(i, 1);
  // 		if(state.modules.public.length>state.modules.public2.length){
  // 			state.modules.public2.push(element)
  // 		}else{
  // 			state.modules.public.push(element)
  // 		}
  // 	}

  // }
};
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

// //拖拽结束的事件
// const onEnd = () => {
// 	for(let i=0;i<state.modules[groupName].length;i++){
// 		if(state.modules[groupName][i].viewId==element.viewId){
// 			state.modules[groupName].splice(i, 1);
// 			if(state.modules.public.length>state.modules.public2.length){
// 				state.modules.public2.push(element)
// 			}else{
// 				state.modules.public.push(element)
// 			}
// 		}

// 	}

// 	state.modules.group1
//   console.log("结束拖拽");
//   console.log(state);
// };

const onMove = (e, originalEvent) => {
  console.log();
  //不允许停靠
  //if (e.relatedContext.element.disabledPark == true) return false;

  return true;
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
}
.itxst {
  display: flex;
  place-content: space-around space-between;
  padding: 2px;
  background-color: #f1f1f1;
}
.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* align-content: center; */
  width: 20%;
}
.itemold {
  display: flex;
  flex-direction: column;
  width: 48.8%;
  min-height: 100px;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
  user-select: none;
  background-color: #ffffff;
  border: solid 1px #dddddd;
}
.itemold > label {
  padding: 6px 10px;
  color: #333333;
  border-bottom: solid 1px #dddddd;
}
.itemold > label:hover {
  cursor: move;
}
.itemold > p {
  padding: 6px 10px;
  color: #666666;
}
.ghost {
  border: solid 1px rgb(19 41 239) !important;
}
.chosenClass {
  border: solid 1px red;
  opacity: 1;
}
.fallbackClass {
  background-color: aquamarine;
}
.row-border {
  border: 1px solid #d3dce6; /* 边框颜色和宽度 */
  border-radius: 4px; /* 可选：圆角 */
}
.red-text {
  color: red;
}
.notice-dialog1 {
  padding: 0 12px;
  border-radius: 15px;
  .my-header {
    position: relative;
    h4 {
      height: 30px;
      text-align: center;
    }
    .el-icon {
      position: absolute;
      top: 2px;
      right: -10px;
      cursor: pointer;
    }
    .spanTip {
      font-size: 14px;
      color: #999999;
    }
  }
  .item {
    display: inline-flex;
    justify-content: space-between;
    width: 46%;
    padding: 6px 10px;
    margin: 0 0.5%;
    line-height: 42px;
    background-color: #f6f8fa;
    border-radius: 5px;
    i:nth-child(1) {
      width: 38%;
      height: 42px;
      line-height: 46px;
    }
    i:nth-child(2) {
      width: 52%;
      height: 16px;
      margin: auto 0;
      line-height: 16px;
      text-align: center;
      text-decoration: underline;
      border-right: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
    }
    i:nth-child(3) {
      width: 8%;
      height: 42px;
      padding-left: 20px;
      line-height: 42px;
      text-decoration: underline;
      img {
        width: 15px;
        height: 20px;
        margin-top: 10px;
      }
    }
    .el-checkbox.el-checkbox--large {
      height: 7%;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #114ed9;
      border-color: #114ed9;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #114ed9;
    }
  }
  .item1 {
    width: 100%;
    line-height: 40px;
    background-color: #ffffff;
    border-left: solid 2px #ffffff;
    box-shadow: 0 0 10px #aa00001a;
  }
  .drag {
    cursor: move;
  }
  .item + .item {
    margin-top: 20px;
  }
  .ghost {
    border: solid 1px rgb(255 255 255) !important;
  }
  .chosenClass {
    background-color: #eeeeee;
    border: solid 1px red;
    opacity: 1;
  }
}
.notice-dialog1 .el-dialog__header {
  margin-right: 0;
  border-bottom: 1px solid #f6f6f6;
}
.notice-dialog1 .el-dialog__body {
  height: 300px;
  overflow: auto;
}
.notice-dialog1 .el-dialog__body::-webkit-scrollbar {
  display: none;
}
.notice-dialog1 .el-dialog__footer {
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid #f6f6f6;
}
.item4 {
  width: 100%;
  line-height: 40px;
  background-color: #ffffff;
  border-left: solid 2px #114ed9;
  box-shadow: 0 0 10px #0000001a;
}
.my-header {
  position: relative;
  h4 {
    height: 30px;
    text-align: center;
  }
  .el-icon {
    position: absolute;
    top: 2px;
    right: -10px;
    cursor: pointer;
  }
  .spanTip {
    font-size: 14px;
    color: #999999;
  }
}
.item {
  display: inline-flex;
  justify-content: space-between;
  width: 46%;
  padding: 6px 10px;
  margin: 0 0.5%;
  line-height: 42px;
  background-color: #ffffff;
  border-radius: 5px;
  i:nth-child(1) {
    width: 70%;
    height: 42px;
    line-height: 46px;
  }
  i:nth-child(2) {
    width: 12%;
    height: 16px;
    margin: auto 0;
    line-height: 16px;
    text-align: center;
    text-decoration: underline;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
  }
  i:nth-child(3) {
    width: 8%;
    height: 42px;
    padding-left: 20px;
    line-height: 42px;
    text-decoration: underline;
    img {
      width: 15px;
      height: 20px;
      margin-top: 10px;
    }
  }
  .el-checkbox.el-checkbox--large {
    height: 7%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #114ed9;
    border-color: #114ed9;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #114ed9;
  }
}
.item1 {
  width: 88%;
  line-height: 40px;
  background-color: #ffffff;
  border-left: solid 2px #ffffff;
  box-shadow: 0 0 10px #aa00001a;
}
.drag {
  cursor: move;
}
.item + .item {
  margin-top: 20px;
}

/* .ghost {
    border: solid 1px rgb(19, 41, 239) !important;
  } */

/* .chosenClass {
    background-color: #eee;
    opacity: 1;
    border: solid 1px red;
  } */
.custom-tree {
  height: 450px; /* 你想要的高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
